<template>
  <div class="gpt-chat">
    <div class="chat-header">
      <h2>AI图片理解</h2>
    </div>
    <div class="chat-body">
      <div class="chat-messages">
        <div
            v-for="msg in messages"
            :key="msg.id"
            class="message"
            :class="msg.isUser ? 'user-message' : 'ai-message'"
        >
          <div class="message-content">{{ msg.text }}</div>
        </div>
      </div>
      <div class="chat-input">
        <input class="question" type="text" placeholder="Type a message..." v-model="message"
               @keyup.enter="sendMessage">
        <el-icon class="send-icon" @click="sendMessage">
          <Promotion/>
        </el-icon>
        <el-icon class="upload-icon" @click="triggerUpload">
          <UploadFilled/>
        </el-icon>
        <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none;">
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {UploadFilled, Promotion} from '@element-plus/icons-vue';
import {ElMessage} from "element-plus";
import {useImgIdentifyStore} from "@/stores/ImageIdentifyStore.js";

const message = ref('');
const fileInput = ref(null);
const imageStore = useImgIdentifyStore()

const messages = ref([
  {id: 1, text: '你好', isUser: false} // 添加isUser标识
]);
let myfile = ''
let question = ''

async function sendMessage() {
  console.log('Message sent:', message.value);

  question = message.value
  if (myfile === null) {
    ElMessage({message: '请先上传文件', type: 'error'})
  } else if (question === '') {
    ElMessage({message: '请输入问题', type: 'error'})
  } else {
    // 添加用户消息
    messages.value.push({
      id: messages.value.length + 1,
      text: message.value,
      isUser: true // 标记为用户消息
    });

    message.value = '';
    ElMessage({
      message: '图片上传成功，请稍后',
      type: 'success',
      duration: 2000,
    })

    await imageStore.getImgUnderstand(myfile, question)

    const code = imageStore.understandResult.code
    if (code === 500) {
      ElMessage({type: "error", message: "图像正在处理中，请稍后再试"})
    } else if (code === 200) {
      ElMessage({type: "success", message: "图像处理成功", duration: 2000})
      // 添加AI回复
      messages.value.push({
        id: messages.value.length + 1,
        text: imageStore.understandResult.description,
        isUser: false // 标记为AI消息
      });
    }
  }
}

function triggerUpload() {
  fileInput.value.click();
}

async function handleFileUpload(event) {
  const file = event.target.files[0];
  if (file) {
    myfile = file
    ElMessage({type: "success", message: "图片上传成功"})
  }
}
</script>

<style scoped>
/* 新增消息布局样式 */
.message {
  display: flex;
  margin: 8px 0;
}

.message-content {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 12px;
}

.user-message {
  justify-content: flex-end;
}

.user-message .message-content {
  background: #409EFF;
  color: white;
}

.ai-message {
  justify-content: flex-start;
}

.ai-message .message-content {
  background: #f0f0f0;
  color: #333;
}

/* 保持原有所有其他样式不变 */
.gpt-chat {
  width: auto;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 0 auto;
}

.chat-header {
  text-align: center;
  margin-bottom: 10px;
}

.chat-body {
  display: flex;
  flex-direction: column;
  height: 85%;
}

.chat-messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

.chat-input {
  display: flex;
  align-items: center;
}

.upload-icon {
  margin-left: 10px;
  cursor: pointer;
}

.question {
  height: 36px;
}

input[type="text"] {
  flex-grow: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

p {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  margin: 20px 20px 20px 60px;
  padding: 10px;
  border-radius: 10px;
}
</style>